<template>
  <div
    class="CustomForecast"
    :style="styleItem"
  >
    <div class="CustomForechast-head">
      <div class="c-head-title">相似度监测</div>
      <div class="c-head-opear">
        <Button type="primary" class="chpbutton" shape="circle" size="small" icon="plus-round" @click.stop="onSelectForecast" >测点选择</Button>
      </div>
    </div>
    <div class="CustomForechast-body">
      <div
        class="echartsMain"
        ref="echartsMain"
      ></div>
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "CustomMonitorSimilarity",
  props: {
    dataSource: {
      type: Object,
      default: () => {}
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 300
    },
    zIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      echartsExample: "",
      seconds: ''
    };
  },
  watch: {
    cdataSource(val) {
      this.renderChart(val);
    }
  },
  computed: {
    cdataSource() {
      return this.dataSource;
    },
    cwidth() {
      return this.width;
    },
    cheight() {
      return this.height;
    },
    styleItem() {
      const { width, height } = this;
      return {
        width: width + "px",
        height: height + "px"
      };
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart(dataSource) {
      this.echartsExample = echarts.init(this.$refs.echartsMain);
      var option = {
        title:{
          show: false
        },
        tooltip: {
          trigger: "axis"
        },
        radius: '100%',
        grid: {
          // left: 0,
          right: '20px',
          bottom: '30px',
          top: '10px',
          // containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.echartsExample.setOption(option);
    },
    onSelectForecast() {
      console.log('选择测点')
    }
  }
};
</script>
<style lang="less">
.CustomForecast{
  background: #fff;
}
.CustomForechast-head {
  height: 40px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
  .c-head-title{
    font-size: 16px;
    color: #333;
    padding: 0 6px;
    line-height: 40px;
    float: left;
  }
  .c-head-opear{
    float: right;
    height: 40px;
    padding-right: 12px;
  }
}
.c-condi{
  text-align: left;
  padding-left: 12px;
}
.c-head-time{
  white-space: nowrap;
  display: inline-block;
  padding-top: 8px;
}
.CustomForechast-body {
  height: calc(100% - 44px);
  .echartsMain{
    width: 100%;
    height: 100%;
  }
}
.echartsMain {
  width: 100%;
  height: 100%;
}
</style>
<style lang="less">
.c-head-opear{
  .chpbutton{
    margin-top: 8px;
    float: left;
    margin-right: 10px;
  }
}
</style>